<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" href="../lib/normalize.css">

		<link rel="stylesheet" href="main.css">
		<title>22.14 UI改进</title>
	</head>


	<body>

		<div id="app" class="container">
			<div class="navbar">
				<h1>计划清单</h1>

			</div>

			<div class="header">
				<h2>
					开黑了么 就写作业?
				</h2>
			</div>


			<form @submit.prevent="merge" id="taskform">
				<div class="wrap">
					<input id="task-input" v-model="current.title" autocomplete="off" placeholder="你想搞事情..."
						type="text">

					<div v-if="current.id" class="detail">
						<textarea v-model="current.desc" placeholder="详细描述"></textarea>
						<input v-model="current.remind_at" type="datetime-local">
						<input type="submit" value="提交">
					</div>



				</div>
			</form>


			<div class="task-list todo">

				<div class="wrap">
					<div class="segment-title">未完成</div>

					<task :todo="todo" :key="todo.id" v-if="!todo.completed" v-for="(todo,index) in list">
						<span class="toggle-complete" slot="status">完成</span>
					</task>
				</div>

			</div>


			<div class="wrap">
				<div class="hr"></div>
			</div>

			<div class="task-list completed">

				<div class="wrap">

					<div class="segment-title">已完成</div>
					<task :todo="todo" :key="todo.id" v-if="todo.completed" v-for="(todo,index) in list">
						<span class="toggle-complete" slot="status">未完成</span>
					</task>
				</div>

			</div>

		</div>



		<template id="task-tpl">
			<!-- 注意组件模板 必须要有一个根结点 -->
			<div class="item clearfix">
				<span @click="action('complete_toggle',todo.id)" class="status">
					<slot name="status">完成</slot>
				</span>

				<span class="title">{{todo.title}}</span>

				<button @click="action('remove', todo.id)">删除</button>
				<button @click="action('set_current',todo)">更新</button>
				<button @click="action('detail_toggle',todo.id)">详情</button>
				<div class="detail" v-if="todo.show_detail">
					{{todo.desc || '暂无详情'}}
				</div>
			</div>

		</template>


		<script src="../lib/vue.js"></script>
		<script src="js/myStorage.js"></script>
		<script src="js/mydate.js"></script>
		<script src="js/main.js"></script>
	</body>

</html>
